@use '../tp';

.#{tp.$prefix}-tabv {
	position: relative;

	// Title
	&_t {
		align-items: flex-end;
		color: tp.cssVar('container-bg');
		display: flex;
		overflow: hidden;
		position: relative;

		&:hover {
			color: tp.cssVar('container-bg-hover');
		}
		&:has(*:focus) {
			color: tp.cssVar('container-bg-focus');
		}
		&:has(*:active) {
			color: tp.cssVar('container-bg-active');
		}

		// Title border
		&::before {
			background-color: currentColor;
			bottom: 0;
			content: '';
			height: 2px;
			left: 0;
			pointer-events: none;
			position: absolute;
			right: 0;
		}
	}
	&.#{tp.$disabled} &_t::before {
		opacity: 0.5;
	}
	// Title without page
	&#{&}-nop &_t {
		height: calc(#{tp.cssVar('container-unit-size')} + 4px);
		position: relative;

		&::before {
			background-color: tp.cssVar('container-bg');
			bottom: 0;
			content: '';
			height: 2px;
			left: 0;
			position: absolute;
			right: 0;
		}
	}
	// Indent
	&_i {
		bottom: 0;
		color: tp.cssVar('container-bg');
		left: 0;
		overflow: hidden;
		position: absolute;
		top: calc(#{tp.cssVar('container-unit-size')} + 4px);
		width: max(tp.cssVar('base-border-radius'), 4px);

		&::before {
			background-color: currentColor;
			bottom: 0;
			content: '';
			left: 0;
			position: absolute;
			top: 0;
			width: 4px;
		}
	}
	&_t:hover + &_i {
		color: tp.cssVar('container-bg-hover');
	}
	&_t:has(*:focus) + &_i {
		color: tp.cssVar('container-bg-focus');
	}
	&_t:has(*:active) + &_i {
		color: tp.cssVar('container-bg-active');
	}
	&.#{tp.$disabled} > &_i {
		opacity: 0.5;
	}
}
.#{tp.$prefix}-tbiv {
	flex: 1;
	min-width: 0;
	position: relative;

	& + & {
		margin-left: 2px;
	}
	& + &.#{tp.$disabled}::before {
		opacity: 0.5;
	}

	&_b {
		@extend %tp-resetUserAgent;

		display: block;
		padding-left: calc(#{tp.cssVar('container-h-padding')} + 4px);
		padding-right: calc(#{tp.cssVar('container-h-padding')} + 4px);
		position: relative;
		width: 100%;

		&:disabled {
			opacity: 0.5;
		}

		&::before {
			background-color: tp.cssVar('container-bg');
			content: '';
			inset: 0 0 2px;
			pointer-events: none;
			position: absolute;
		}
		&:hover::before {
			background-color: tp.cssVar('container-bg-hover');
		}
		&:focus::before {
			background-color: tp.cssVar('container-bg-focus');
		}
		&:active::before {
			background-color: tp.cssVar('container-bg-active');
		}
	}
	&_t {
		color: tp.cssVar('container-fg');
		height: calc(#{tp.cssVar('container-unit-size')} + 4px);
		line-height: calc(#{tp.cssVar('container-unit-size')} + 4px);
		opacity: 0.5;
		overflow: hidden;
		position: relative;
		text-overflow: ellipsis;
	}
	&#{&}-sel &_t {
		opacity: 1;
	}
}
.#{tp.$prefix}-tbpv {
	// Container
	&_c {
		@extend %tp-container_children;
		@extend %tp-container_subcontainers;

		padding-bottom: tp.cssVar('container-v-padding');
		padding-left: 4px;
		padding-top: tp.cssVar('container-v-padding');
	}
}
